<template>
  <div class="ivu-box">
    <Breadcrumb>
      <BreadcrumbItem>订单管理</BreadcrumbItem>
      <BreadcrumbItem>审核</BreadcrumbItem>
    </Breadcrumb>
    <Form>
      <FormItem>
        <Button @click="$router.go(-1)" style="margin-right: 10px">返回</Button>
      </FormItem>
    </Form>
    <div class="form_box" id="form_box">
      <div class="cardBox" style="overflow: hidden">
        <div class="left" ref="getheight" style="width: calc(50% - 10px); float: left; height: 1000px">
          <div class="card" id="x1" style="width: 100%">
            <h3>视频区</h3>
            <video ref="video" width="100%" controls name="media" style="height: 300px"></video><br>
            <video ref="video" width="100%" controls name="media" style="height: 300px"></video>
          </div>
          <div class="card" id="x2" style="width: 100%; margin-bottom: 0">
            <h3>明细</h3>
            <div style="text-align: center; height: 105px; overflow-y: auto;">
              <div
                style="cursor: pointer;display:flex;justify-content: space-between;"
                :class="checkIndex == item.id ? 'on' : ''"
                @click="changeLight(item, index)"
                v-for="(item, index) in mxadata"
                :key="index"
                v-if="item.product_num != 0">
                <span>
                  {{ item.product_name }}￥{{ item.price }} X
                  {{ item.product_num }}
                </span>
                <span
                  v-if="checkIndex == item.id"
                  style="color:red;"
                  @click.stop="dels(item, index)"
                >删除</span>
              </div>
            </div>

            <div
              style="
                width: 100%;
                display: flex;
                justify-content: center;
                padding: 20px 0;
              ">
              <Button type="primary" @click="submit">提交</Button>
            </div>
          </div>
        </div>
        <div style="width: calc(50% - 10px); float: right; overflow-y: scroll; height: 1000px">
          <div class="card" style="width: 100%; margin-bottom: 0;">
            <h3>模板库</h3>
<!--            <video ref="video" width="100%" controls name="media" style="height: 600px"></video>-->
            <ul class="ulBox form_bar">
              <li
                class="li"
                :class="checkIndex == item.id ? 'active' : ''"
                v-for="(item, index) in mouldData"
                :key="index"
                @click="mbclk(item, index)"
              >
                <div class="add"  @click="mdAdd(item)"></div>
                <div class="remove" @click="mdReduce(item)"></div>
                <div style="display:flex;justify-content: space-between;">
                  <div @click="mdAdd(item)" style="font-size:20px; width:25px;height:25px; border:1px solid #ccc;border-radius:50%;text-align:center;line-height:20px;">+</div>
                  <div>{{ item.goods_num }}</div>
                  <div @click="mdReduce(item)" style="font-size:20px;width:25px;height:25px; border:1px solid #ccc;border-radius:50%;text-align:center;line-height:20px;">-</div>
                </div>
                <img class="img" :src="item.pic" />
                <div class="name">{{ item.name }}</div>
              </li>
            </ul>
          </div>
          <div class="card"  style="width: 100%; margin-bottom: 0">
            <h3>选择罚款原因</h3>
            <div style="height: 130px; overflow-y: auto;">
              <RadioGroup v-model="formItem.radio">
                <Radio label="one">用户遮挡摄像头/遮挡商品/偷吃</Radio><br>
                <Radio label="two">用户购买的商品不在模板里</Radio><br>
                <Radio label="three">识别困难或者无法识别包括不限于视频短缺/灯光问题/门未关等</Radio><br>
                <Radio label="four">用户将商品放错层架（暂只针对重力柜有效）
                </Radio>
              </RadioGroup>
            </div>
            <div
              style="
                width: 100%;
                display: flex;
                justify-content: center;
                padding: 20px 0;
              ">
              <Button type="primary" @click="submit">提交</Button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        formItem: {
          radio: 'one'
        },
        video: "",
        mouldData: [],
        checkIndex: null,
        refHeight: 0,
        mxadata: [],
        xxx:0,
      };
    },
    mounted() {
      setTimeout(() => {
        this.$nextTick(() => {
          this.refHeight = this.$refs.getheight.clientHeight;
          this.xxx=document.getElementById('x1').offsetHeight+document.getElementById('x2').offsetHeight+160
        });
      }, 300);
    },
    created() {
      this.getGoods();
      this.getVideo();
      this.getMx();
    },
    methods: {
      getGoods() {
        this.axios
          .post("/order/get_order_goods", { order_id: this.$route.query.id })
          .then(res => {
            console.log("res: ", res);
            if (res.code == 1) {
              this.mouldData = res.data.dataInfo[0].goods;
            }
          });
      },
      getMx() {
        this.axios
          .post("/order/check_order", {
            id: this.$route.query.ids,
            page: 1,
            limit: 1
          })
          .then(res => {
            console.log('res: ', res)
            if (res.code === 1) {
              this.mxadata = res.data.list[0].order_goods;
              if (!this.mxadata) {
                this.mxadata = []
              }
            }
          });
      },
      getVideo() {
        this.axios
          .post("/order/get_video", { order_id: this.$route.query.id })
          .then(res => {
            console.log("res: ", res);
            if (res.code == 1) {
              this.$refs.video.src = res.data.video_url;
            }
          });
      },
      mbclk(item, index) {
        this.checkIndex = item.id;
        let finds = false;
        for (const key in this.mxadata) {
          if (this.mxadata[key].id == item.id) {
            this.mxadata[key].product_num = item.goods_num;
            finds = true;
          }
        }
        if (finds == false) {
          this.mxadata.push({
            id: item.id,
            price: item.c_price,
            product_name: item.name,
            product_num: item.goods_num
          });
        }
      },
      changeLight(item, index) {
        this.checkIndex = item.id;
      },
      dels(item, index) {
        this.checkIndex = null;
        this.mxadata.splice(index, 1);
        for (const i in this.mouldData) {
          if (item.id == this.mouldData[i].id) {
            this.mouldData[i].goods_num = 0;
          }
        }
      },
      submit() {
        let goods = [];
        let falg = [];
        for (const key in this.mxadata) {
          let b = false;
          for (const i in this.mouldData) {
            if (this.mxadata[key].id == this.mouldData[i].id) {
              console.log(falg);
              b = true;
            }
          }
          falg.push(b);
        }
        console.log(falg);
        let run = true;
        for (const key in falg) {
          if (!falg[key]) {
            run = false;
          }
        }
        console.log(run);
        if (!run) {
          return this.$Message.error("请移除未上架商品");
        }
        // this.mxadata.filter(item => Number(item.product_num) != 0);
        this.mxadata.forEach((items, index) => {
          if(items.product_num!=0){
            goods.push({
              goods_id: items["id"],
              num: items["product_num"]
            });
          }
        });
        console.log(goods);
        this.axios
          .post("/order/user_check", {
            goods: goods,
            id: this.$route.query.ids
          })
          .then(res => {
            console.log("res: ", res);
            if (res.code == 1) {
              this.$Message.success("审核成功");
              this.$router.go(-1);
            }
          });
      },
      mdAdd(item) {
        item.goods_num = Number(item.goods_num) + 1;
        for (const key in this.mxadata) {
          if (this.mxadata[key].id == item.id) {
            this.mxadata[key].product_num = item.goods_num;
          }
        }
      },
      mdReduce(item) {
        if (item.goods_num > 0) {
          item.goods_num = Number(item.goods_num) - 1;
          for (const key in this.mxadata) {
            if (this.mxadata[key].id == item.id) {
              this.mxadata[key].product_num = item.goods_num;
            }
          }
        } else {
          item.goods_num = 0;
        }
      }
    }
  };
</script>

<style scoped lang="scss">
  .swiper-container {
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  // .swiper-wrapper{width: 100%!important;}

  .li {
    position: relative;

    .add {
      position: absolute;
      left: 0;
      width: 50%;
      top: 0;
      bottom: 0;
    }
    .remove {
      position: absolute;
      right: 0;
      width: 50%;
      top: 0;
      bottom: 0;
    }
  }

  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;

    max-height: 164px;
    // width: calc(33.3333% - 10px);
    // box-sizing: border-box;
    border: 1px solid #dcdee2;
    padding: 10px;
    // margin-top: 20px;

    .flex {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .img {
      width: 80px;
      height: 80px;
      object-fit: cover;
      margin: 10px auto;
    }

    .name {
      text-align: center;
      font-size: 14px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .mdbtn {
    width: 20px;
    height: 20px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .on {
    background-color: #5cadff;
    color: #fff;
  }

  .ulBox {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .flex {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    li {
      width: calc(33.3333% - 10px);
      min-height: 160px;
      box-sizing: border-box;
      border: 1px solid #dcdee2;
      padding: 10px;
      margin-top: 20px;

      .img {
        width: 80px;
        height: 80px;
        // object-fit: cover;

        margin: 10px auto;
      }

      .name {
        text-align: center;
      }
    }

    .active {
      border: 4px solid #2db7f5 !important;
    }

    &::after {
      content: "";
      width: calc(33.3333% - 10px);
    }
  }

  .cardBox {
    padding: 15px;

    .card {
      width: calc(50% - 10px);
      margin-bottom: 20px;

    }
  }

  .card {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 18px 20px;
  }

  .flexSw {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .flexSw .left {
    // width: 450px;
    // flex: 1;
    width: 100%;
  }

  .flexSw .right {
    // width: 450px;
  }

  .borderCard {
    // overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    flex-flow: column;
    box-sizing: border-box;
  }

  .borderCard ul {
    display: block;
    min-width: 300px;
    box-sizing: border-box;
    border: 1px solid #ddd;
    padding: 20px;
    margin-bottom: 10px;
  }

  .borderCard ul li {
    list-style: none;
    line-height: 26px;
    font-size: 14px;
    overflow: hidden;
    display: block;
  }

  .borderCard ul li .name {
    color: #999;
    float: left;
    width: 130px;
    padding-right: 20px;
    text-align: right;
  }

  .borderCard ul li .text {
    color: #000;
    float: left;
  }

  h3 {
    line-height: 50px;
  }

  .subordinate {
    margin: 10px 20px;
  }

  .checkbox {
    margin: 5px 10px;
    min-width: 200px;
  }

  .check {
    margin-top: 5px;
    margin-left: 30px;
    min-width: 160px;
  }

  .checkboxs {
    border-bottom: 1px solid silver;
    padding-bottom: 10px;
  }

  .outer {
    margin: 20px 0;
    padding: 10px;
    border: 1px solid silver;
    border-radius: 5px;
  }
</style>
